import React from 'react';
import cn from 'classnames';
import WARNING_TYPES from '@/pages/Recruitment/Interview/utils/WARNING_TYPES';
import style from './style.less';

/**
 * type null 无；
 * @param {string} warningType
 */
const WarningBox = ({ userCode, userName, recHOSTuserCode, warningType = WARNING_TYPES.NONE }) => {
    const getContent = type => {
        switch (type) {
            case WARNING_TYPES.ONLINE:
                return (
                    <div className={cn(style.noticeBox, style.line)}>
                        <div className={style.txtGap}>{userName}</div>
                        <div className={style.txtGap}>已上线</div>
                    </div>
                );
            case WARNING_TYPES.OFFLINE:
                return (
                    <div className={cn(style.noticeBox, style.line)}>
                        <div className={style.txtGap}>{userName}</div>
                        <div className={style.txtGap}>已离线</div>
                    </div>
                );
            case WARNING_TYPES.NOTICE:
                return (
                    <div className={cn(style.noticeBox, style.notice)}>
                        <i className={cn(style.scaleIcon, 'icon iconfont iconnitificationIcon')}></i>
                        <span className={style.addGap}>无面试官录音，建议开启</span>
                    </div>
                );
            case WARNING_TYPES.PAUSED:
                return (
                    <div className={cn(style.noticeBox, style.notice)}>
                        <i className={cn(style.scaleIcon, 'icon iconfont iconnitificationIcon')}></i>
                        <span className={style.addGap}>录音已暂停，请立即开启录音</span>
                    </div>
                );
            case WARNING_TYPES.CLOSE_REENTER:
                return (
                    <div className={cn(style.noticeBox, style.notice)}>
                        <i className={cn(style.scaleIcon, 'icon iconfont iconnitificationIcon')}></i>
                        <span className={style.addGap}>录音已暂停，请立即开启录音</span>
                    </div>
                );
            case WARNING_TYPES.WARNING: // 无音浪
                return (
                    <div className={cn(style.noticeBox, style.warning)}>
                        <i className={cn(style.scaleIcon, 'icon iconfont iconnitificationIcon')}></i>
                        <span className={style.addGap}>麦克风检测不到音浪</span>
                    </div>
                );
            case WARNING_TYPES.ERROR:
                return (
                    <div className={cn(style.noticeBox, style.warning)}>
                        <i className={cn(style.scaleIcon, 'icon iconfont iconnitificationIcon')}></i>
                        <span className={style.addGap}>麦克风故障，请检查设备</span>
                    </div>
                );
            case WARNING_TYPES.UPLOAD_FAIL:
                return (
                    <div className={cn(style.noticeBox, style.warning)}>
                        <i className={cn(style.scaleIcon, 'icon iconfont iconnitificationIcon')}></i>
                        <span className={style.addGap}>网络信号差，建议由他人录音</span>
                    </div>
                );
            default:
                return null;
        }
    };
    /**
     * 用于驱动显示、隐藏动画
     * @param {} type
     * @returns
     */
    const getClassName = type => {
        if (type === WARNING_TYPES.WARNING && userCode !== recHOSTuserCode) return style.hide;
        if (
            [
                WARNING_TYPES.NOTICE,
                WARNING_TYPES.PAUSED,
                WARNING_TYPES.WARNING,
                WARNING_TYPES.ERROR,
                WARNING_TYPES.UPLOAD_FAIL,
                WARNING_TYPES.CLOSE_REENTER,
                WARNING_TYPES.ONLINE,
                WARNING_TYPES.OFFLINE
            ].includes(type)
        ) {
            return '';
        }
        return style.hide;
    };
    return <div className={cn(style.animationWrapper, getClassName(warningType))}>{getContent(warningType)}</div>;
};

export default React.memo(WarningBox);
